<template>
  <div id="helpcenter">
    <c-title :hide="false" text="客服中心"></c-title>

    <!--新的布局-->
    <div class="service-main">
      <img :src="host + 'help-center/service.png'" class="service-img"  v-if="serviceInfo.instructions_one && serviceInfo.instructions_two"/>
      <h3 class="title">客服中心</h3>
      <div class="service-head" v-if="serviceInfo.instructions_one && serviceInfo.instructions_two">
        <div class="head-wrap">
          <div class="artificial-text">
            {{serviceInfo.instructions_one}}
          </div>

        </div>
        <div class="head-time"> {{serviceInfo.instructions_two}}</div>
      </div>
      <!--v-if="serviceInfo.service_module && serviceInfo.service_module.length > 0"-->
      <div class="service-board flex-j-sb flex-a-c"  v-if="serviceInfo.service_module && serviceInfo.service_module.length > 0">
        <blcok v-for="(item,index) in serviceInfo.service_module" :key="index" class="flex-j-c service-block">
          <div class="service-item flex-j-c flex-a-c" @click="callPhone(item.value)" v-if="item.type == 'mobile'">
            <div class="item-title flex-a-c flex-j-c green">
              <span class="iconfont icon-zx_map_tel"></span>
            </div>
            <div class="item-content">客服热线</div>
          </div>
          <div class="service-item flex-j-c flex-a-c"  v-if="item.type == 'online'" @click="serviceTo(item.value)">
            <div class="item-title flex-a-c flex-j-c blue">
              <span class="iconfont icon-custom-service"></span>
            </div>
            <div class="item-content">在线客服</div>
          </div>
          <div class="service-item flex-j-c flex-a-c" @click="complaintTo" v-if="item.type == 'proposal'">
            <div class="item-title flex-a-c flex-j-c orange">
              <span class="iconfont icon-supplier_myrelease"></span>
            </div>
            <div class="item-content">投诉建议</div>
          </div>
        </blcok>



      </div>
      <div v-else class="mb-20"></div>
      <div class="question">
        <h3 class="question-title">常见问题</h3>
        <div class="question-list">
          <van-cell-group :border="false">
              <van-cell :title="item.title" is-link @click="questionShow(item)" v-for="(item, index) in questionList" :key="index" />
          </van-cell-group>
        </div>
      </div>
      <div class="mh-50"></div>
    </div>
    <transition name="fade">
      <div class="message" v-if="showbox" :style="{ width: this.fun.getPhoneEnv() == 3 ? '375px' : '100%' }">
        <header><span class="icon" @click="hide"></span>帮助详情</header>
        <div class="msgbox" v-html="detailsInfo.content"></div>
      </div>
    </transition>
  </div>
</template>

<script>
import { Toast } from "vant";
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      //新的参数和数据
      sharedata: "",
      serviceInfo:{},
      isLoadMore: true,
      page: 1,
      totalPage: 0,
      questionList:[],
      detailsInfo:{},
      showbox:false,
      host:''
    };
  },
  methods: {
    init() {
      this.page = 1;
      this.questionList = [];
    },
    questionShow(item) {
      this.questionDetails(item.id);
    },
    complaintTo() {
      this.$router.push(this.fun.getUrl("complaintIndex"));
    },
    //客服H5跳转连接
    serviceTo(url) {
      if(url) {
        window.location.href = url;
      }
    },
    callPhone(mobile) {
      window.location.href = 'tel://' + mobile;
    },
    //初始化分享设置
    getData() {
      let that = this;
      $http.get("plugin.help-center.frontend.controllers.center.share").then(response => {
        if (response.result == 1) {
          this.sharedata = response.data;
          console.log(this.sharedata);
          // that.initShare();
          that.fun.wxShare(
            "",
            {},
            {
              title: this.sharedata.title,
              imgUrl: this.sharedata.icon,
              description: this.sharedata.description
            },
            data => {
              // if (!that.fun.isTextEmpty(data.shop && data.shop.shop)) {
              //   that.initCservice(data.shop.shop.cservice); //客服重新赋值
              // }
            }
          );
          // that.initCservice("");
        }
      });
    },
    hide() {
      this.showbox = false;
    },
    initData(){
      $http.get("plugin.help-center.frontend.controllers.center.index").then(res => {
        if(res.result == 1) {
          let data = res.data;
          this.serviceInfo = data;
        } else {
          this.$dialog.alert({ message: response.msg });
        }
      });
    },
    questionDetails(id) {
      $http.post("plugin.help-center.frontend.controllers.center.index.centent-details" ,{id:id}).then(res => {
        if(res.result == 1) {
          let data = res.data;
          this.detailsInfo = data;
          this.showbox = true;
          this.$nextTick(() => {
            document.documentElement.scrollTop = 0;
          })
        } else {
          this.$dialog.alert({ message: response.msg });
        }
      });
    },
    questionData() {
      let query = {
        page:this.page
      }
      $http.post("plugin.help-center.frontend.controllers.center.index.centent-list", query, "加载中..").then(response => {
        if (response.result == 1) {
          let res = response.data;
          this.isLoadMore = true;
          this.totalPage = res.last_page;
          if (!this.totalPage) {
            this.page = 0;
          }
          this.questionList = res.data;
        } else {
          this.page = this.page - 1;
          this.isLoadMore = false;
          this.$dialog.alert({
            message: response.msg
          });
        }
      });
    },
    //获取更多数据
    getMoreData() {
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.totalPage) {
        return;
      } else {
        this.page = this.page + 1;
        let query = {
          page:this.page
        }
        $http.post("plugin.help-center.frontend.controllers.center.index.centent-list", query, "加载中").then(
          res => {
            this.isLoadMore = true;
            if (res.result === 1) {
              let myData = res.data.data;
              this.questionList = [...this.questionList, ...myData]; //数组拼接
            } else {
              this.page = this.page - 1;
              this.isLoadMore = false;
            }
          },
          function(response) {
            console.log("response", response);
            // error callback
          }
        );
      }
    }
  },
  activated() {
    this.init();
    this.host = JSON.parse(localStorage.getItem("yz_basic_info")).host || "";
    if ((this.$route.params.key === 0 || this.$route.params.key) && this.title.length > 0) {
      this.show(this.$route.params.key);
    }
    this.initData();
    this.questionData();
    this.getData();
  },
  created() {
    //this.initCservice("");
  },
  components: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" scoped>
.question ::v-deep .van-cell__title {
  flex:2;
  text-align: left;
}
.question-list ::v-deep .van-cell {
  padding:0.75rem 0;
}
 ::v-deep .msgbox img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
}
.mb-20 {
  height: 1.25rem;
  clear:both;
}
.mh-50 {
  height: 6.25rem;
  clear: both;
}
.service-main {
  background: linear-gradient( 180deg, #CDE8FA 0%, #CDE8FA 6.4375rem,#F5F5F5 13.3125rem, #F5F5F5 100%);
  position: relative;
  .service-img {
    width: 5.375rem;
    height: auto;
    max-height: 100%;
    display: block;
    position: absolute;
    top:1.25rem;
    right:1.375rem;
    clear: both;
  }
  .title {
    font-weight: bold;
    font-size: 1.25rem;
    color: #00001C;
    padding:1.25rem 0 1rem 0;
    text-align: left;
    margin:0 0 0 1.5rem;
  }
  .service-head {
    background: linear-gradient( 180deg, #E4F1FB 0%, #FFFFFF 100%);
    border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
    border: 0.0625rem solid #FFFFFF;
    padding:0.75rem;
    text-align: left;
    margin:0 0.75rem;
    color: #6E6E79;
    .head-wrap {
      padding:0 0 0.75rem 0;
      border-bottom: 0.0625rem solid #E3E3EC;
      .artificial-text {
        width:75%;
      }
    }
    .head-time {
      padding:0.8125rem 0 0 0;
    }
  }
  .service-board {
    background: #FFFFFF;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    margin:0.625rem 0.75rem;
    padding:1.25rem 0 1rem 0;
    .service-block {
      flex-direction: column;
      flex:1;
    }
    .service-item {
      flex-direction: column;
      .item-title {
        width: 2.375rem;
        height: 2.375rem;
        border-radius: 0.875rem 0.875rem 0.875rem 0.875rem;
        color: #FFFFFF;
        .icon-zx_map_tel {
          font-size: 1.125rem;
          line-height: 1.125rem;
        }
        .icon-custom-service {
          font-size: 1.1875rem;
          line-height: 1.1875rem;
        }
        .icon-supplier_myrelease {
          font-size: 1.1875rem;
          line-height: 1.1875rem;
          padding:0 0 0 0.25rem;
        }
      }
      .green {
        background: linear-gradient( 180deg, #11B960 0%, #11B960 100%);
      }
      .blue {
        background: #1A78F2;
      }
      .orange {
        background: #F99019;
      }
      .item-content {
        padding:0.625rem 0 0 0;
        font-size: 0.75rem;
        color: #00001C;
      }
    }
  }
  .question {
    background: #FFFFFF;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    margin:0 0.75rem;
    padding:0.75rem;
    .question-title {
      font-weight: 500;
      font-size: 1rem;
      color: #00001C;
      text-align: left;
      padding:0 0 0.625rem 0;
    }
  }
}

#helpcenter {
  table td {
    border-style: solid !important;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.3s;
  }

  .fade-enter,
  .fade-leave-to {
    transform: translateX(100%);
  }

  .message {
    width: 100%;
    position: absolute;
    background: #fff;
    top: 0;
    min-height: 100%;
    overflow: hidden;
    z-index: 999;

    .msgbox {
      line-height: 1.25rem;
      box-sizing: border-box;
      padding:10px 0 80px 0;
    }

    header {
      height: 2.5rem;
      width: 100%;
      line-height: 2.5rem;
      font-size: 14px;
      font-weight: bolder;
      position: relative;
      border-bottom: solid 0.0625rem #ebebeb;

      .icon {
        position: absolute;
        display: block;
        float: left;
        width: 0.65rem;
        height: 0.65rem;
        border: solid 0.1rem rgba(0, 0, 0, 0.5);
        transform: rotate(45deg);
        border-right: transparent;
        border-top: transparent;
        margin: 0.9375rem;
      }
    }
  }
}
</style>
